@import "base.scss";
@import "mixin.scss";

/* SY-setContent */
.SY-setContent {
    height: 100%;
    font-weight: 300;
    padding-left: 8 * $fontSize10;
    .headBox {
        height:24 * $fontSize10;
        color:$colorfff;
        background-image: url("../img/personalCenter/invitation.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0 0;
        .pic {
            width: 8 * $fontSize10;
            height: 8 * $fontSize10;
            padding-top: 5 * $fontSize10;
            margin:0 auto $fontSize20;
            img {
                width: 100%;
                height: 100%;
            }
        }
        p {
            font-size: 1.5 * $fontSize10;
            color: $colorfff;
            line-height: 2 * $fontSize12;
        }
    }
    .mainBox {
        width: 102 * $fontSize10;
        margin: 3.5 * $fontSize10 auto 30 * $fontSize10;
        > div {
            background: $colorfff;
        }
        .S-left {
            width: 54 * $fontSize10;
            .content {
                padding: 2 * $fontSize12 3 * $fontSize10 4.5 * $fontSize10;
                .title {
                    font-size: $fontSize16;
                    color: $color333;
                    margin-bottom: $fontSize20;
                }
                .poster {
                    width: 47 * $fontSize10;
                    height:50 * $fontSize10;
                    margin:0 auto;
                    background: $colorred;
                }
                .linkBox {
                    padding-left: $fontSize10;
                    .link {
                        height: 3.5 * $fontSize10;
                        width: 33.5 * $fontSize10;
                        padding-left:$fontSize10;
                        line-height: 3.5 * $fontSize10;
                        font-size: $fontSize14;
                        color: $color666;
                        overflow: hidden;
                        outline: none;
                        white-space: nowrap;
                        background: #f2f4f6;
                    }
                    .copy {
                        width: 9 * $fontSize10;
                        height: 3.5 * $fontSize10;
                        line-height: 3.5 * $fontSize10;
                        font-size: $fontSize14;
                        color: $colorfff;
                        @include link-posColor($color333,$color666);
                    }
                }
            }
            .shareWays {
                margin: 2.5 * $fontSize10 auto;
                padding-left: $fontSize20;
                a {
                    width: 5 * $fontSize10;
                    height: 5 * $fontSize10;
                    margin:0 3 * $fontSize10 0 0;
                    text-indent: 0em;
                    overflow:inherit;
                    cursor: pointer;
                    background-image: url("../img/icons/shareWays.png");
                    background-repeat: no-repeat;
                    &.bds_tsina {
                        background-position: 0 (- 5.2 * $fontSize10);
                    }
                    &.bds_weixin {
                        background-position: - 5.1 * $fontSize10 (- 5.2 * $fontSize10);
                    }
                    &.bds_sqq {
                        background-position: - 15.3 * $fontSize10 (- 5.2 * $fontSize10);
                    }
                    &.bds_qzone {
                        background-position: - 20.4 * $fontSize10 (- 5.2 * $fontSize10);
                    }
                }
            }
        }
        .S-right {
            width: 46 * $fontSize10;
            .content {
                padding: 2 * $fontSize14 3 * $fontSize10;
                .titleBox > .title {
                    font-size: $fontSize20;
                    color: $color333;
                }
                .points {
                    font-size: $fontSize16;
                    color: $colorred;
                }
                > .text {
                    font-size: $fontSize16;
                    color: $color333;
                    margin:$fontSize20 0 2.5 * $fontSize10;
                }
            }
            .illustrate {
                padding:2.5 * $fontSize10 3 * $fontSize10 5 * $fontSize10;
                background: #f8fafc;
                .title {
                    font-size: 1.5 * $fontSize10;
                    color: $color333;
                    margin-bottom: $fontSize12;
                }
                .text {
                    font-size: $fontSize14;
                    color: $color666;
                    line-height: $fontSize20;
                    margin-bottom:3 * $fontSize10;
                    &.last {
                        margin-bottom: $fontSize20;
                    }
                }
                table {
                    width: 34 * $fontSize10;
                    text-align: center;
                    @include border($fontSize10 / 5,solid,$colorccc);
                }
                tr {
                    height: 3.8 * $fontSize10;
                    line-height: 3.8* $fontSize10;
                    &:nth-child(5n) td {
                        border-bottom: 0;
                    }
                    td {
                        font-size: $fontSize14;
                        color: $color666;
                        border-bottom: 1px solid $colorccc;
                        &:first-child {
                            border-right: 1px solid $colorccc;
                        }
                    }
                }
                th {
                    font-size: $fontSize14;
                    color: $color333;
                    border-bottom: 1px solid $colorccc;
                    &:first-child {
                        border-right: 1px solid $colorccc;
                    }
                }
            }
        }
    }
}
